<!-- 编辑弹窗 -->
<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :destroy-on-close="true"
    :lock-scroll="false"
    :title="'添加客服展示'"
    :visible="visible"
    class="ele-dialog-view"
    custom-class="ele-dialog-form"
    top="10vh"
    width="757px"
    @closed="closed"
    @update:visible="updateVisible">
    <el-form
      ref="form"
      :model="form"
      label-width="76px">
      <el-form-item label="微信列表:" style="margin-bottom: 0; margin-top: 15px;">
        <el-checkbox v-model="checkWechatAll" :indeterminate="checkWechatBoolean" @change="changeWechatAllData">全选/反选
        </el-checkbox>
        <div style=" float:right;">
          <el-form-item label="微信号:">
            <el-input v-model="form.wechatInput" clearable placeholder="请输入搜索标题." size="small" style="width: 200px;"
                      @clear="wechatClear"></el-input>
            <el-button icon="el-icon-search" size="small" style="margin-left: 10px;" type="primary"
                       @click="wechatSearch">搜索
            </el-button>
          </el-form-item>
        </div>
        <div style="margin: 20px 0; "></div>
        <div
          style="border-radius: 3px; border: 1px solid var(--border-color-base); padding: 10px; height: 340px; overflow-y:auto; margin-bottom: 6px;">
          <el-checkbox-group v-model="form.wechatData" @change="changeWechatData">
            <el-checkbox v-for="obj in serviceTemp" v-show="obj.display" :key="obj.id" :label="obj.id"
                         style="width: 300px">[{{ obj.name }}]
              {{ obj.nickname }} {{ obj.wechat }}
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button
        @click="updateVisible(false)">取消
      </el-button>
      <el-button
        :loading="loading"
        type="primary"
        @click="wechatsave">确定
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'servicePlanListEdit',
  props: {
    // 微信选中列表
    wechatIds: Array,
    // 编辑落地页
    serviceId: Number,
    // 弹窗是否打开
    visible: Boolean,
    // 微信列表
    service: Array
  },
  watch: {
    wechatIds() {
      this.form = Object.assign({}, {
        wechatInput: '', wechatData: []
      }, {
        wechatData: this.wechatIds
      })
    }
  },
  data() {
    return {
      // 微信全选
      checkWechatAll: false,
      // 全选是否全部勾选
      checkWechatBoolean: false,
      // 表单数据
      form: Object.assign({}, {
        wechatInput: '', wechatData: []
      }),
      //客服列表
      serviceTemp: Array,
      // 提交状态
      loading: false
    };
  },

  created() {
    this.serviceTemp = this.service;
    for (let i in this.serviceTemp) {
      this.serviceTemp[i].display = true;
    }
  },

  methods: {
    wechatSearch() {
      const wechatInput = this.form.wechatInput + '';
      if (!wechatInput) {
        this.wechatClear();
        return
      }
      for (let i in this.serviceTemp) {
        let name = this.serviceTemp[i].name + '';
        let wechat = this.serviceTemp[i].wechat + '';
        let nickname = this.serviceTemp[i].nickname + '';
        this.serviceTemp[i].display = (
          name.indexOf(wechatInput) > -1
          || wechat.indexOf(wechatInput) > -1
          || nickname.indexOf(wechatInput) > -1
        );
      }
    },
    changeWechatData(obj) {
      this.checkWechatAll = obj.length === this.serviceTemp.length;
      this.checkWechatBoolean = obj.length > 0 && obj.length < this.serviceTemp.length;
    },
    changeWechatAllData(obj) {
      let ids = this.serviceTemp.map(function (arr) {
        return arr.id;
      });
      this.checkWechatBoolean = false;
      this.form.wechatData = obj ? ids : [];
    },
    wechatClear() {
      for (let i in this.serviceTemp) {
        this.serviceTemp[i].display = true;
      }
    },
    closed() {
      this.checkWechatAll = false;
      this.checkWechatBoolean = false;
      this.form = Object.assign({}, {
        wechatInput: '', wechatData: []
      });
    },
    wechatsave() {
      this.loading = true;
      this.form = Object.assign({}, this.form, {
        wechatInput: '', serviceId: this.serviceId
      });
      this.$http.post('/ServicePlan/editWechat', this.form).then(res => {
        this.loading = false;
        if (res.data.code === 0) {
          this.$message({type: 'success', message: res.data.msg});
          this.form = Object.assign({}, {
            wechatInput: '', wechatData: []
          });
          this.updateVisible(false);
          this.$emit('countMethod', {serviceId: this.serviceId, count: res.data.count});
          this.$emit('done');
        } else {
          this.$message.error(res.data.msg);
        }
      }).catch(e => {
        this.loading = false;
        this.$message.error(e.message);
      });
    },
    updateVisible(value) {
      this.$emit('update:visible', value);
    }
  }
}
</script>
<style scoped>
.ele-dialog-view /deep/ .el-form-item__content .el-checkbox__label {
  font-size: 12px !important;
}

.ele-dialog-view /deep/ .el-checkbox {
  margin-right: 2px !important;
}

</style>


